<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/login.css" rel="stylesheet">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 20px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }
        .left2{
            text-align: left;
            font-size: 20px;
            float: left;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="el-header">
            <span class="left2" @click="exit"><i  class="el-icon-switch-button">退出登录</i></span>
            <span class="title">超市进货系统</span>
            <span class="message"><i class="el-icon-user"></i>{{role}}</span>
        </el-header>

            <el-main>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">进退货物</el-menu-item>
                    <el-menu-item index="2">库存管理</el-menu-item>
                    <el-menu-item index="3" >商品管理</el-menu-item>
                    <el-menu-item index="4">查看货单</el-menu-item>
                </el-menu>

                <!--搜索表单-->
                <el-form :inline="true" :model="goods" class="demo-form-inline">

                    <el-form-item label="商品id">
                        <el-input v-model="goods.id" placeholder="商品id"></el-input>
                    </el-form-item>

                    <el-form-item label="商品名称">
                        <el-input v-model="goods.name" placeholder="商品名称"></el-input>
                    </el-form-item>

                    <el-form-item label="商品品类">
                        <el-select v-model="goods.category" placeholder="商品品类">
                            <el-option label="日化" value="日化"></el-option>
                            <el-option label="生鲜" value="生鲜"></el-option>
                            <el-option label="粮油" value="粮油"></el-option>
                            <el-option label="饮料" value="饮料"></el-option>
                            <el-option label="体闲百货" value="体闲百货"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <!--按钮-->

                <el-row>


                    <el-button type="primary" plain @click="dialogFormVisible = true">新增商品</el-button>

                </el-row>

                <el-dialog title="商品信息" :visible.sync="dialogFormVisible">
                    <el-form :model="goodsB">
                        <el-form-item label="商品名称" :label-width="formLabelWidth">
                            <el-input v-model="goodsB.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品品类" :label-width="formLabelWidth">
                            <el-select v-model="goodsB.category" placeholder="请选择商品品类">
                                <el-option label="日化" value="日化"></el-option>
                                <el-option label="生鲜" value="生鲜"></el-option>
                                <el-option label="粮油" value="粮油"></el-option>
                                <el-option label="饮料" value="饮料"></el-option>
                                <el-option label="体闲百货" value="体闲百货"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品单位" :label-width="formLabelWidth">
                            <el-input v-model="goodsB.unit" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addGoods">确 定</el-button>
                    </div>
                </el-dialog>

                <el-dialog title="修改商品信息" :visible.sync="dialogFormVisibleB">
                    <el-form :model="goodsB">
                        <el-form-item label="商品名称" :label-width="formLabelWidth">
                            <el-input v-model="goodsB.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="商品品类" :label-width="formLabelWidth">
                            <el-select v-model="goodsB.category" placeholder="请选择商品品类">
                                <el-option label="日化" value="日化"></el-option>
                                <el-option label="生鲜" value="生鲜"></el-option>
                                <el-option label="粮油" value="粮油"></el-option>
                                <el-option label="饮料" value="饮料"></el-option>
                                <el-option label="体闲百货" value="体闲百货"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品单位" :label-width="formLabelWidth">
                            <el-input v-model="goodsB.unit" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisibleB = false">取 消</el-button>
                        <el-button type="primary" @click="alterGoods">确 定</el-button>
                    </div>
                </el-dialog>

                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                    >


                        <el-table-column
                                prop="id"
                                label="商品id"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="商品名"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="category"
                                align="center"
                                label="品类">
                        </el-table-column>

                        <el-table-column
                                prop="unit"
                                align="center"
                                label="单位">
                        </el-table-column>

                        <el-table-column
                                align="center"
                                label="操作">

                            <template slot-scope="scope">
                                <el-button type="success" @click="updateGoods(scope.row.id)">修改商品</el-button>
                                <el-button type="danger" @click="deleteGoods(scope.row.id)">删除商品</el-button>
                            </template>

                        </el-table-column>

                    </el-table>
                </template>


                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>

            </el-main>

        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                activeIndex: '3',
                role:'',
                id:'',
                aarole: '',
                goods:{
                    id:'',
                    name:'',
                    category:'',
                    unit:''
                },
                goodsB:{
                    id:'',
                    name:'',
                    category:'',
                    unit:''
                },
                dialogFormVisible: false,
                dialogFormVisibleB: false,
                formLabelWidth: '120px',
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },

                // 每页显示的条数
                pageSize:5,
                // 总记录数
                totalCount:100,
                // 当前页码
                currentPage: 1,
                tableData: [{
                    id: '1',
                    name: '50米',
                    rules: '2233',
                    location: "东操",
                    time:'2022-12-10'
                }, {
                    id: '1',
                    name: '50米',
                    rules: '2233',
                    location: "东操",
                    time:'2022-12-10'
                }, {
                    id: '1',
                    name: '50米',
                    rules: '2233',
                    location: "东操",
                    time:'2022-12-10'
                }, {
                    id: '1',
                    name: '50米',
                    rules: '2233',
                    location: "东操",
                    time:'2022-12-10'
                }]


            }
        },
        mounted(){


            //当页面加载完成后，发送异步请求，获取数据

            this.role=$.cookie("name");
            this.id=$.cookie("id");
            this.selectAll();


        },
        methods: {
            onSubmit(){
                this.selectAll();
            },

            // 查询分页数据
            selectAll(){

                axios({
                    method:"post",
                    url:"http://localhost:8080/superMarket/goods/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.goods
            }).then(resp =>{
                    //设置表格数据
                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;

                })


            },
            updateGoods(x){

                this.goodsB.id=x;
                this.dialogFormVisibleB=true;
            },
            addGoods(){
                this.dialogFormVisible=false;
                this.$confirm('是否确认商品信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮


                    //2. 发送AJAX请求
                    var _this = this;

                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8080/superMarket/goods/addGoods",
                        data:_this.goodsB
                    }).then(function (resp) {
                        if(resp.data == "success"){

                            _this.selectAll();

                            _this.$message({
                                message: '恭喜你，新增成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {

                    this.$message({
                        type: 'info',
                        message: '已取消新增'
                    });
                });

            },
            deleteGoods(e){
                this.$confirm('是否确认删除商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    var _this = this;

                    axios({
                        method:"post",
                        url:"http://localhost:8080/superMarket/goods/deleteGoods",
                        data:e
                    }).then(function (resp) {
                        if(resp.data == "success"){

                            _this.selectAll();

                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {

                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            alterGoods(){
                this.dialogFormVisibleB=false;
                this.$confirm('是否确认商品信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    var _this = this;

                    axios({
                        method:"post",
                        url:"http://localhost:8080/superMarket/goods/alterGoods",
                        data:_this.goodsB
                    }).then(function (resp) {
                        if(resp.data == "success"){

                            _this.selectAll();

                            _this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {

                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });

            },
            exit(){
                window.location.href='login.html';
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                // 重新设置每页显示的条数
                this.pageSize  = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                // 重新设置当前页码
                this.currentPage  = val;
                this.selectAll();
            },

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if(key==1)
                {
                    window.location.href='main.html';
                }
                if(key==2)
                {
                    window.location.href='stock.html';
                }
                if(key==4)
                {
                    window.location.href='invoice.html';
                }
            }
        }
    })
</script>
</html>